<template>
	<scroll-view :refresher-triggered="data.refresherBool" :refresher-enabled="true" scroll-y="true"
		@refresherrefresh="refresherrefresh" @scrolltolower="scrolltolower">
		<view class="list">
			<view class="listItem" v-for="(item,index) in data.result.list" :key="index">
				<view class="top">
					<view class="left">
						<image :src="data.httpUrl+'/app/file/viewFile?fileId='+item.avatarId" mode="aspectFill">
						</image>
					</view>
					<view class="right">
						<view class="name">
							{{item.userName}}
							<image src="/static/img/index/138.png" mode="widthFix"></image>
						</view>
						{{item.createTime}}
					</view>
				</view>
				<view class="pf">
					<image v-for="(item1,index1) in 5" :key="index1"
						:src="item.productScore*1>index?'/static/img/index/129.png':'/static/img/index/128.png'"
						mode="widthFix"></image>
					非常满意
				</view>
				<text class="cont">{{item.content}}</text>
				<view class="imgs">
					<view class="" v-for="(item1,index1) in item.attachmentIdList" :key="index">
						<image  @tap="previewImage(item1)" v-if="item1.fileType != '.mp4'" :src="data.httpUrl+'/app/file/viewFile?fileId='+item1.id"
							mode="aspectFill">
						</image>
						<image v-else
							:src="data.httpUrl+'/app/file/viewFile?fileId='+item1.id+'&process=video/snapshot,t_1000,f_jpg,w_800,h_600,m_fast'"
							mode="aspectFill"></image>
						<view @tap="previewVideo(item1)" v-if="item1.fileType == '.mp4'">
							<image src="/static/img/index/131.png" mode="widthFix"></image>
						</view>
					</view>
				</view>
				<view class="merchantResponse" v-for="(item1,index1) in item.relies" :key="index1">
					<view class="top">
						<view class="left">
							<image src="/static/img/index/84.png" mode="widthFix"></image>
							商家回复
						</view>
						<text>{{item1.createTime}}</text>
					</view>
					{{item1.replyContent}}
				</view>
			</view>
		</view>
	</scroll-view>
	<PreviewVideo ref="previewVideoc" />
</template>

<script setup lang="ts">
	import { queryReviewsByRefId } from "@/utils/api/shop"
	import PreviewVideo from '@/components/previewVideo'
	import { reactive,ref } from 'vue';
	const previewVideoc = ref()
	const props = defineProps(['storeId'])
	const data = reactive<any>({
		httpUrl: getApp().globalData.baseUrl,
		result: {},
		obj: { pageNum: 1, pageSize: 10, storeId: props.storeId, reviewType: 'FIRST' }
	})
	const refresherrefresh = () => {
		data.refresherBool = true;
		data.obj.pageNo = 1;
		requstList(0)
	}
	const previewVideo=(item)=>{
		previewVideoc.value.init(item.id)
	}
	const previewImage = (item) => {
		uni.previewImage({
			current: 1,
			urls: [data.httpUrl + '/app/file/viewFile?fileId=' + item.id],
			loop: true,
		})
	}
	const requstList = (i) => {
		if(!i){
			uni.showLoading({
				title: '加载中...',
				mask: true
			})
		}
		
		if (data.obj.pageNum == 1) {
			data.result.list = [];
		}
		queryReviewsByRefId({ data: data.obj }).then((res) => {
			res.data.list = [...data.result.list, ...res.data.list];
			data.result = res.data;
			data.refresherBool = false;
			if(!i){
				uni.hideLoading()
			}
		})
	}
	const scrolltolower = () => {
		if (data.result.total != data.result.list.length) {
			data.obj.pageNum += 1;
			requstList(0)
		}
	}
	defineExpose({
		requstList
	})
</script>

<style lang="scss">
	scroll-view {
		flex: 1;
		overflow: auto;
	}

	.pf {
		display: flex;
		align-items: center;
		color: #8C8C8C;
		font-size: 32rpx;
		margin-top: 20rpx;

		image {
			width: 50rpx;
			margin-right: 10rpx;
		}
	}

	.list {
		padding-top: 24rpx;

		.listItem {
			margin-bottom: 24rpx;
			padding: 32rpx 24rpx;
			border-radius: 32rpx;
			background: #fff;

			>.top {
				display: flex;
				align-items: center;

				.left {
					width: 96rpx;
					height: 96rpx;
					border-radius: 50%;
					background: #ccc;

					image {
						width: 100%;
						border-radius: 50%;
						height: 100%;
					}
				}

				.right {
					flex: 1;
					margin-left: 24rpx;

					.name {
						font-size: 32rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						image {
							width: 48rpx;
						}

						margin-bottom: 10rpx;
					}

					color: #BFBFBF;
					font-size: 24rpx;
				}
			}

			>.cont {
				margin: 24rpx 0;
				display: inline-block;
			}

			>.imgs {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;

				>view {
					width: 48%;
					height: 346rpx;
					border-radius: 24rpx;
					position: relative;
					// background: #ccc;
					margin-bottom: 24rpx;

					>image {
						width: 100%;
						height: 100%;
						border-radius: 24rpx;
					}

					view{
						position: absolute;
						left: 0;
						top: 0;
						bottom: 0;
						right: 0;
						display: flex;
						align-items: center;
						justify-content: center;
						z-index: 7;
						image{
							width: 40rpx;
						}
					}

				}
			}

			>.goods {
				display: flex;
				align-items: center;
				padding: 16rpx;
				border-radius: 24rpx;
				background-color: #F5F5F5;
				margin: 24rpx 0;

				.left {
					width: 200rpx;
					height: 200rpx;
					background: #fff;
					border-radius: 24rpx;
					margin-right: 16rpx;
				}

				.right {
					flex: 1;
					line-height: 1.5;
					display: flex;
					flex-direction: column;
					align-items: flex-end;

					text {
						margin-top: 30rpx;
						font-size: 36rpx;
						color: #FF5233;
					}
				}
			}

			>.merchantResponse {
				padding: 19rpx 16rpx;
				border-radius: 16rpx;
				margin-top: 10rpx;
				background: #F2F1FF;
				font-size: 24rpx;
				color: #8C8C8C;

				.top {
					margin-bottom: 15rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					text {
						color: #8C8C8C;
						font-size: 24rpx;
					}

					.left {
						display: flex;
						align-items: center;
						font-size: 32rpx;

						image {
							width: 42rpx;
							margin-right: 12rpx;
						}
					}
				}
			}
		}
	}
</style>